<template>
  <div>
    <div class="add-model-box" @click="back()">
      <div class="add-ac-model" @click.stop>
        <el-card>
          <div class="add-ac-head">
              <span>发布活动</span>
              <i class="el-icon-close close-add-model" @click="back()"></i>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="add-active-type" @click="toAddNew(1)">
                <div class="add-active-icon">
                  <i class="el-icon-trophy"></i>
                </div>
                <span>赛事</span>
                <div class="add-ac-model-box" v-if="cation_state == 0"></div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="add-active-type" @click="toAddNew(2)">
                <div class="add-active-icon add-active-ac">
                  <i class="el-icon-s-flag"></i>
                </div>活动
              </div>
            </el-col>
            <el-col :span="8">
              <div class="add-active-type" @click="toAddNew(3)">
                <div class="add-active-icon add-active-rw">
                  <i class="el-icon-document"></i>
                </div>任务
              </div>
            </el-col>
          </el-row>
          <div style="margin-top:20px" v-if="cation_state == 0">
            <alert-box content="您的跑团未认证或认证已过期只能发布免费的活动和任务"></alert-box>
            <!-- <el-alert title="警告提示" type="error" description="您的跑团未认证或认证已过期只能发布免费的活动和任务" show-icon :closable="false"></el-alert> -->
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import alertBox from '../../components/unit/alert-box.vue';

export default {
  components:{ alertBox },
  data() {
    return {
      cation: {},
      cation_state: 1
    };
  },
  mounted() {
      this.getCation();
  },
  methods: {
    //获取认证信息
    getCation() {
      this.ajaxs("finance/getCationInfo", {
        success: res => {
          var cation_type = res.msg.cation_type;
          this.cation = res.msg;
          this.cation_state = 1;
          if (!res.code){
             this.cation_state = 0;
             cation_type = 0;
          }
          window.localStorage.setItem('cation',cation_type)
        }
      });
    },
    //返回上一页面
    back() {
      this.$router.go(-1);
    },
    /**
     * 新窗口打开
     */
    toAddNew(param) {
      if(param == 1 && this.cation_state == 0)return false;
      this.$router.push({
        path: "/manage/active/add/" + param
      });
      // let routeData = this.$router.push({
      //   path: "/manage/active/add/"+param,
      //   params: {
      //     id: 1
      //   }
      // });
      // window.open(routeData.href, "_blank");
    }
  }
};
</script>

<style>
.add-model-box {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999999999999;
}
.add-ac-model {
  width: 600px;
  margin: 200px auto;
}
.add-ac-head {
  padding-bottom: 20px;
  font-size: 18px;
  color: #666;
  overflow: hidden;
}
.close-add-model {
  float: right;
  margin-top: 3px;
  cursor: pointer;
}
.add-active-type{
    position: relative;
}
.add-ac-model-box{
    position: absolute;
    top:0;left:0;
    width: 100%;height: 100%;
    background: rgba(255,255,255,0.5)
}
</style>